
<template>
  <div class="heatmap-chart" ref="chart"></div>
</template>
<style lang="scss">
.empty{
    text-align:center;
    width:100%;
    height:100%;
    color:#ccc;
    font-size:13px;
}
.heatmap-chart{
  width:100%;
}
</style>
<style>
.nvtooltip{
  position: absolute;
  z-index: 10000;
  padding: 8px 12px;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  background:#fff;
  color:#000;
  border-radius: 4px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}
.nvtooltip p.pro {
    font-size: 12px;
    padding: .2em;
}
.nvtooltip p.num{
  font-family: "num";
  font-size: 24px;
}
</style>
<script type="text/ecmascript-6">
import nvToolTip from '../../util/d3_chart/nvToolTip';
import HeatMap from '../../util/d3_chart/heatmap-chart';

export default {
  props: ['chartData'],
  data(){
    return {
       items: {
            study: [],
        }
    }
  },
  computed: {
    element() {
      return this.$refs.chart;
    }
  },
  methods: {
    renderChart() {
      let data = this.items;
      this.element.innerHTML = '';
      if (!data || !data.length) {
        this.element.innerHTML = '<div class="empty">暂无数据</div>';
      } else {
        new HeatMap(this.element, {
          data: data,
          onMouseOver: function (data, i, event) {
            let innerHTML = '<p class="pro">' + data.parentName + ' ' + data.name + '·平均学习人数' + '</p><p class="num">' + data.value + '</p>';
            nvToolTip(event, innerHTML);
          },
          onMouseOut: function () {
            nvToolTip.removeToolTip();
          },
          width: this.element.offsetWidth,
          height: 170,
          cellWidth: (this.element.offsetWidth-6-50)/24,
          cellHeight: (170-6-15)/7,
          cellPadding: 1,
          cellGroup: 6,
          cellGroupPadding: 2,
          fontColor: "rgba(155,155,155,1)",
          colors: [
            "#0AE1FE", "#0041BB"
          ]
        });
      }
    },
  },
  watch: {
      chartData:{
        immediate: true,
        handler(val){
          this.items = val;
          this.$nextTick(() => {
                this.renderChart();
           });
        }
      }
  },
  mounted() {
    this.items = this.chartData;
    this.$nextTick(() => {
      this.renderChart();
    })
  }
}
</script>
